<template>
  <div>
    <h1>富文本</h1>
    <!-- <vWangeditor v-model="valueHtml" /> -->
    <!-- <vWangeditor v-model="valueHtml" @html="html" /> -->
    <TEditor
      ref="editor"
      v-model="value"
      @getContent="getcontent"
      @submitImg="handleSubmitImg"
    />
    <button>提交</button>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import vWangeditor from "./components/wangeditor";
import TEditor from "./components/TEditor.vue";
import { ref, watch } from "vue";
import { richTtextUpload } from "./api";
const valueHtml = ref("<p>hello</p>");
const value = ref(``);
// const html = (val) => {
//   valueHtml.value = val;
//   console.log("valueHtml.value", valueHtml.value);
// };
const editor = ref();
// html 富文本回显
const getcontent = (v) => {
  value.value = v;
  console.log("value.value", value.value);
};
const handleSubmitImg = (formData, callback) => {
  richTtextUpload(formData)
    .then((res) => {
      if (res.code == 200) {
        console.log("res", res.msg);
        ElMessage.success(res.msg);
        callback({
          code: 200,
          data: `http://localhost:6500${res.data}`,
          msg: "",
        });
      }
    })
    .catch(() => {
      callback({ code: 400, data: null, msg: "上传出错，服务器开小差了呢" });
    });
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
}
</style>
